import React, { useRef } from 'react';
import { Box } from '@mui/material';
import { motion, useInView } from 'framer-motion';

// Counter to track which section we're on so we can alternate directions by default
let sectionCounter = 0;

export const TypeSectionScrollReveal = (props) => {
  const {
    backgroundColor = null,
    marginY = 0,
    paddingY = 0,
    paddingX = 0,
    text,
    useInnerBox = true, // Boolean prop to toggle inner box
    innerBoxSx = {}, // Additional inner Box styles
    direction = 'auto', // 'auto', 'left', or 'right'
    inViewAmount = 0.3, // New prop for amount parameter in useInView
    ...otherProps
  } = props;

  // Create a ref to detect when section is in view
  const sectionRef = useRef(null);
  
  // Use the useInView hook to detect when section is in viewport
  const isInView = useInView(sectionRef, { 
    amount: inViewAmount, // Using the prop instead of hardcoded value
    once: false 
  });
  
  // Determine the direction based on the prop
  let fromLeft;
  if (direction === 'auto') {
    // Increment counter for each instance to alternate direction
    const currentSection = sectionCounter++;
    fromLeft = currentSection % 2 === 0;
  } else if (direction === 'random') {
    // Random direction
    fromLeft = Math.random() < 0.5;
  } else {
    // Use explicitly specified direction
    fromLeft = direction === 'left';
  }
  
  // Animation variants based on direction
  const variants = {
    hidden: {
      x: fromLeft ? '-100vw' : '100vw',
      scale: 2,
      opacity: 0
    },
    visible: {
      x: 0,
      scale: 1,
      opacity: 1,
      transition: {
        type: 'tween',
        duration: 0.6,
        ease: 'easeOut'
      }
    },
    exit: {
      x: fromLeft ? '100vw' : '-100vw',
      scale: 2,
      opacity: 0,
      transition: {
        type: 'tween',
        duration: 0.6,
        ease: 'easeIn'
      }
    }
  };

  return (
    <Box
      ref={sectionRef}
      sx={{
        marginY,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor,
        width: "100%",
        overflow: "hidden", // Prevent scaled elements from causing scrollbars
      }}
      {...otherProps}
    >
      {useInnerBox ? (
        <Box
          sx={{
            width: { 
              xs: "100%", 
              sm: 600, 
              md: 960, 
              lg: 1280, 
              xl: 1920 
            },
            paddingY,
            paddingX,
            ...innerBoxSx,
          }}
        >
          <motion.div
            initial="hidden"
            animate={isInView ? "visible" : "exit"}
            variants={variants}
          >
            {text}
          </motion.div>
        </Box>
      ) : (
        <motion.div
          initial="hidden"
          animate={isInView ? "visible" : "exit"}
          variants={variants}
          style={{
            width: "100%",
            padding: `${paddingY}px ${paddingX}px`
          }}
        >
          {text}
        </motion.div>
      )}
    </Box>
  );
};